<template>
  <div class="app-container">
    <template>
      <el-table :data="major" height="620" border style="width:100%;margin-top: 20px">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column fixed="right" label="专业名称">
          <template slot-scope="scope">
            <el-input v-if="!scope.$index" v-model="input" placeholder="请输入内容"></el-input>
            <div
              v-else-if="scope.$index"
              @keydown.enter="estr(scope.row)"
              @dblclick="dbClk(scope.row.major) "
            >
              <el-input
                type="text"
                class="qwe"
                v-if="text==scope.row.major"
                @blur="blurs(scope.row)"
                placeholder="请输入内容"
                v-model="isIpt"
                v-focus
              ></el-input>
              <el-button v-else type="primary">{{scope.row.major}}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button v-if="!scope.$index" @click="add" type="primary">保存</el-button>
            <el-button-group v-else>
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      input: "",
      isIpt: "",
      text: "",
      form: {}
    };
  },
  computed: {
    ...mapState("major", ["major"])
  },
  methods: {
    ...mapActions("major", [
      "getMajor",
      "AddClassify",
      "UpdateClassify",
      "DelClassify"
    ]),
    //保存
    add() {
      if (this.input == "") return;
      this.AddClassify(this.input);
      this.$message({
        message: "新增成功",
        type: "success"
      });
      this.input = "";
    },
    //双击
    dbClk(ele) {
      this.text = ele;
      this.isIpt = ele;
    },
    //失去焦点
    blurs(row) {
      if (this.isIpt != row.major) {
        row.major = this.isIpt;
        this.UpdateClassify(row);
        this.$message({
          message: "修改成功",
          type: "success"
        });
      }
      this.text = "";
    },
    //修改
    handleEdit(row) {
      console.log(row);
      this.blurs(row);
    },
    //删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.DelClassify(id);
          await this.getMajor();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //回车
    estr(row) {
      this.text = "";
    }
  },
  mounted() {
    this.getMajor();
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
};
</script>

<style scoped>
</style>